<template>
	<div class="chat-group-side">
		<el-tabs type="border-card">
			<!-- 群聊信息 tab -->
			<el-tab-pane label="群聊信息">
				<div class="info-section">
					<el-form 
						class="group-form"
						:model="group"
						label-width="100px">
						<el-form-item label="群聊名称">
							<el-input 
								v-model="group.name" 
								disabled 
								maxlength="20">
							</el-input>
						</el-form-item>

						<el-form-item label="群主">
							<el-input :value="ownerName" disabled></el-input>
						</el-form-item>

						<el-form-item label="群公告">
							<el-input
								type="textarea"
								v-model="group.notice"
								disabled
								:rows="4"
								maxlength="1024"
								placeholder="群主未设置">
							</el-input>
						</el-form-item>

						<el-form-item label="我的群昵称">
							<el-input
								v-model="group.remarkNickName"
								:disabled="!editing"
								:placeholder="$store.state.userStore.userInfo.nickName"
								maxlength="20">
							</el-input>
						</el-form-item>

						<el-form-item label="群聊备注">
							<el-input
								v-model="group.remarkGroupName"
								:disabled="!editing"
								:placeholder="group.name"
								maxlength="20">
							</el-input>
						</el-form-item>

						<div class="form-actions">
							<el-button 
								v-show="editing" 
								type="success" 
								@click="onSaveGroup">
								保存修改
							</el-button>
							<el-button 
								v-show="!editing" 
								type="primary" 
								@click="editing=!editing">
								编辑
							</el-button>
							<el-button 
								type="danger" 
								v-show="!isOwner" 
								@click="onQuit">
								退出群聊
							</el-button>
						</div>
					</el-form>
				</div>
			</el-tab-pane>

			<!-- 群成员管理 tab -->
			<el-tab-pane label="群成员管理">
				<div class="members-section">
					<div class="members-header">
						<div class="search-input">
							<el-input
								placeholder="搜索群成员"
								v-model="searchText"
								prefix-icon="el-icon-search"
								clearable>
							</el-input>
						</div>
						<div class="actions">
							<div 
								v-show="!group.quit" 
								class="invite-btn"
								@click="showAddGroupMember=true">
								<i class="el-icon-plus"></i>
								<span>邀请成员</span>
							</div>
						</div>
					</div>

					<div class="members-container" @scroll="handleScroll">
						<div class="members-grid">
							<div 
								v-for="member in displayMembers"
								:key="member.id"
								v-show="!member.quit && member.showNickName.includes(searchText)"
								class="member-item">
								<group-member
									:member="member"
									:showDel="false"
									:ownerId="group.ownerId"
									:group="group"
									:isCurrentUserAdmin="isAdmin">
								</group-member>
							</div>
						</div>
						<div v-if="loading" class="loading-text">加载中...</div>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>

		<!-- 邀请成员弹窗 -->
		<add-group-member 
			:visible="showAddGroupMember" 
			:groupId="group.id" 
			:members="groupMembers" 
			@reload="$emit('reload')"
			@close="showAddGroupMember=false">
		</add-group-member>
	</div>
</template>

<script>
	import AddGroupMember from '../group/AddGroupMember.vue';
	import GroupMember from '../group/GroupMember.vue';
	import HeadImage from '../common/HeadImage.vue';

	export default {
		name: "chatGroupSide",
		components: {
			AddGroupMember,
			GroupMember,
			HeadImage
		},
		data() {
			return {
				searchText: "",
				editing: false,
				showAddGroupMember: false,
				displayMembers: [],
				pageSize: 20,
				currentPage: 1,
				loading: false
			}
		},
		props: {
			group: {
				type: Object
			},
			groupMembers: {
				type: Array
			}
		},
		
		methods: {
			onClose() {
				this.$emit('close');
			},
			initMembersList() {
				this.currentPage = 1;
				this.displayMembers = this.groupMembers.slice(0, this.pageSize);
			},
			handleScroll(e) {
				if (!e || !e.target) return;
				
				const target = e.target;
				const scrollHeight = target.scrollHeight;
				const scrollTop = target.scrollTop;
				const clientHeight = target.clientHeight;
				
				if (scrollHeight - scrollTop - clientHeight < 50 && !this.loading) {
					this.loadMoreMembers();
				}
			},
			loadMoreMembers() {
				if (this.loading) return;
				if (this.displayMembers.length >= this.groupMembers.length) return;
				
				this.loading = true;
				
				setTimeout(() => {
					const start = this.displayMembers.length;
					const end = start + this.pageSize;
					const newMembers = this.groupMembers.slice(start, end);
					this.displayMembers = [...this.displayMembers, ...newMembers];
					this.loading = false;
				}, 100);
			},
			loadGroupMembers() {
				this.$http({
					url: `/group/members/${this.group.id}`,
					 method: "get"
				}).then((members) => {
					this.groupMembers = members;
					this.initMembersList();
				})
			},
			onSaveGroup() {
				let vo = this.group;
				this.$http({
					url: "/group/modify",
					method: "put",
					data: vo
				}).then((group) => {
					group.id=group.zid;
					this.$store.commit("updateGroup", group);
					this.$emit('reload');
					this.$message.success("修改成功");
				})
			},
			onQuit() {
				this.$confirm('退出群聊后将不再接受群里的消息，确认退出吗？', '确认退出?', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http({
						url: `/group/quit/${this.group.id}`,
						method: 'delete'
					}).then(() => {
						this.$store.commit("removeGroup", this.group.id);
						this.$store.commit("activeGroup", -1);
						this.$store.commit("removeGroupChat", this.group.id);
					});
				})
			},

		},
		computed: {
			isAdmin() {//判断当前用户是否是群主
				let users = this.$store.state.userStore.userInfo;
				return users.id === this.group.ownerId ? true : false;
			},
			ownerName() {
				let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
				return member && member.showNickName;
			},
			isOwner() {
				return this.group.ownerId == this.$store.state.userStore.userInfo.id;
			},
			
		},
		watch: {
			searchText() {
				this.initMembersList();
			},
			groupMembers: {
				handler() {
					this.initMembersList();
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.chat-group-side {
		height: 100%;
		display: flex;
		flex-direction: column;

		.el-tabs {
			height: 100%;
			display: flex;
			flex-direction: column;
			
			.el-tabs__content {
				flex: 1;
				overflow: hidden;
				padding: 0;

				.el-tab-pane {
					height: 100%;
					overflow: auto;
				}
			}
		}

		// 基本信息区域
		.info-section {
			padding: 30px;
			
			.group-form {
				max-width: 100%;
				
				.el-form-item {
					margin-bottom: 25px;
				}

				.form-actions {
					margin-top: 40px;
					text-align: right;
				}
			}
		}

		// 成员管理区域
		.members-section {
			height: 100%;
			padding: 20px;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.members-header {
				flex-shrink: 0;
				margin-bottom: 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 15px;

				.search-input {
					flex: 1;
				}

				.invite-btn {
					display: flex;
					align-items: center;
					gap: 5px;
					padding: 8px 15px;
					border-radius: 4px;
					background: var(--theme-color);
					color: white;
					cursor: pointer;
					transition: all 0.3s;

					&:hover {
						background: var(--theme-color-light);
					}
				}
			}

			.members-container {
				flex: 1;
				overflow-y: auto;
				overflow-x: hidden;
				min-height: 0;
				padding: 0 5px;

				.members-grid {
					display: grid;
					grid-template-columns: repeat(2, 120px);
					gap: 30px;
					justify-content: center;
					padding: 15px;
				}

				.member-item {
					width: 120px;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.loading-text {
					text-align: center;
					padding: 15px;
					color: #909399;
				}

				&::-webkit-scrollbar {
					width: 6px;
				}

				&::-webkit-scrollbar-thumb {
					background: #ddd;
					border-radius: 3px;

					&:hover {
						background: #ccc;
					}
				}

				&::-webkit-scrollbar-track {
					background: transparent;
				}
			}
		}
	}

	// 标签页样式
	.el-tabs--border-card {
		border: none !important;
		box-shadow: none !important;

		.el-tabs__header {
			background: #f5f7fa !important;
			border: none !important;
			margin: 0 !important;
		}

		.el-tabs__item {
			height: 45px !important;
			line-height: 45px !important;
			font-size: 15px !important;
			
			&.is-active {
				background: #fff !important;
				border-top: 2px solid var(--theme-color) !important;
			}
		}
	}

	.el-tabs__content {
		.el-tab-pane {
			height: 100%;
			overflow: visible !important;
		}
	}

	.member-item {
		.group-member-item {
			width: 100% !important;
			padding: 5px;
			
			.member-avatar {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 8px;
				
				.head-image {
					margin: 0 auto;
				}
			}

			.member-name {
				text-align: center;
				padding: 0 5px;
				font-size: 12px;
			}
		}
	}
</style>
